<template>
  <div>
    <a-table
      :data-source="parentData"
      :showHeader="show_header"
      :pagination="false"
      :expandIcon="customExpandIcon"
    >
      <a-table-column key="children">
        <template #title>
          <span v-if="isrefash" style="color: #1890ff">
            <a-button>刷新</a-button>
          </span>
        </template>
        <!-- <template #scope="text, record"></template> -->
      </a-table-column>
      <!-- <template #expandedRowRender="text"></template> -->
      <div style="margin: 0 20px">
        <!-- <g-model-audit-history-table
        v-if="record.children && record.children.length > 0"
        :parentData="record.children"
                ></g-model-audit-history-table>-->
        <a-table
          v-if="text.children_data"
          :pagination="false"
          :data-source="text.children_data"
          :expandIcon="customExpandIcon"
        >
          <a-table-column key="children">
            <template #title>
              <span style="color: #1890ff"></span>
            </template>

            <!-- <template slot-scope="text, record"></template> -->
          </a-table-column>
          <template #expandedRowRender="text">
            <div style="margin: 0 20px">
              <g-model-audit-history-table
                v-if="text.children_data && text.children_data.length > 0"
                :parentData="text.children_data"
                :is_refash="text.norefash"
                :showHeader="text.showHeader"
              ></g-model-audit-history-table>
            </div>
          </template>
          <a-table-column key="age" title="Age" data-index="age" />
          <a-table-column key="address" title="Address" data-index="address" />
          <a-table-column key="action" width="30">
            <template #scope="text, record">{{ record.key }}</template>
          </a-table-column>
        </a-table>
      </div>

      <a-table-column key="age" title="Age" data-index="age" />
      <a-table-column key="address" title="Address" data-index="address" />
      <a-table-column key="action" width="30">
        <template #scope="text, record">{{ record.key }}</template>
      </a-table-column>
    </a-table>
    <div class="align-right" v-if="isrefash">
      <a-pagination
        size="small"
        :total="50"
        :show-total="(total) => `Total ${total} items`"
        show-size-changer
        show-quick-jumper
      />
    </div>
  </div>
</template>

<script>
  export default {
    props: ['entityInfo', 'parentData', 'is_refash', 'showHeader'],
    name: 'g-model-audit-history-table',
    data() {
      return {
        filteredTags: [],
        tagsFilterDropdownVisible: false,
        isrefash: true,
        norefash: false,
        show_header: true,
      };
    },
    methods: {
      toggleSelectedTags(oldTags, tag, checked) {
        let newTags = [...oldTags];
        if (checked) {
          newTags.push(tag);
        } else {
          newTags = newTags.filter((t) => t != tag);
        }
        return newTags;
      },

      customExpandIcon(props) {
        // 是否有子项，无子项不展示图标
        // record是每行的数据，后端返回的数据会有一个hasChild字段判断是否有子项
        // if (props.record && props.record.children_data) {
        //   // props.expanded a-table组件判断是否展开了为true是展开,false为没展开
        //   if (props.expanded) {
        //     // onClick事件必须添加上，相当于把a-table里的展开事件给了自定义的图标，不加的话点击会失效
        //     return (
        //       <a-icon
        //         type="minus-square"
        //         style="color: rgba(0,0,0,0.5);margin-right: 3px;"
        //         onClick={(e) => {
        //           props.onExpand(props.record, e);
        //         }}
        //       ></a-icon>
        //     );
        //   } else {
        //     return (
        //       <a-icon
        //         type="plus-square"
        //         style="color: rgba(0,0,0,0.5);margin-right: 3px;"
        //         onClick={(e) => {
        //           props.onExpand(props.record, e);
        //         }}
        //       ></a-icon>
        //     );
        //   }
        // } else {
        //   return <span style="padding-left: 21px;" />;
        // }
      },
      onChange() {},
    },
    created() {
      this.isrefash = this.is_refash == undefined ? true : this.is_refash;
      this.show_header = this.showHeader == undefined ? true : this.showHeader;
    },
  };
</script>

<style scoped>
  .align-right {
    margin-top: 20px;
    width: 100%;
    text-align: right;
  }
</style>
